<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>个人主页_树洞社区</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/community.css}">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1654155_pdkxw2wuoy.css">
    <script th:src="@{/js/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/layui/layui.js}" type="application/javascript"></script>
    <script th:src="@{/js/comment.js}"></script>
    <script type="application/javascript">
        layui.use('element',function () {
            var element = layui.element;
        });
    </script>
</head>
<body>
<div th:replace="navigation :: nav"></div>
<div class="layui-container tree-marginTop">
    <div class="tree-panel tree-home">
        <img th:src="${userInfo.avatarUrl}" th:alt="${userInfo.nickName}">
        <h1>
            <span th:text="${userInfo.nickName}"></span>
            <i th:if="${userInfo.sex == 1}" class="iconfont icon-nanxing"></i>
            <i th:if="${userInfo.sex == 2}" class="iconfont icon-nvxing"></i>
            <i th:if="${userInfo.sex == 0}" class="iconfont icon-xingbie"></i>
            <i class="layui-badge tree-badge-grade" th:text="${'LV'+userInfo.grade}"></i>
        </h1>
        <p class="tree-home-info">
            <span class="iconfont icon-jifen" th:text="${userInfo.score}"></span>
            <span class="layui-icon layui-icon-time" th:text="${#dates.format(userInfo.gmtCreate,' yyyy-MM-dd 加入')}"></span>
            <span class="layui-icon layui-icon-location" th:text="${' 来自：'+userInfo.address}"></span>
        </p>
        <p class="tree-home-sign" th:text="${userInfo.sign == '' || userInfo.sign == null?'个性签名：该用户太懒了，还没来得及填写':'个性签名：'+userInfo.sign}"></p>
        <div class="tree-sns">
            <a onclick="fans(this)" class="layui-btn layui-btn-primary"
               th:if="${session.user!=null && session.user.id != userInfo.id}" th:id="${userInfo.id}"
               th:data-id="${userInfo.id}" th:text="${followStatus == 0?'关注':(followStatus == 1?'已关注':'已互粉')}"
               th:classappend="${followStatus == 1 or followStatus == 2?'fansStatus':''}"></a>
            <input type="text" th:id="'status-'+${userInfo.id}" th:value="${followOtherStatus}" hidden="hidden">
        </div>
    </div>
    <div class="tree-panel tree-tab-que-foll-fans">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li th:class="${section == 'question'?'layui-this':''}">
                    <a style="margin-left: 8px;" th:href="@{'/user/'+${userInfo.id}}" th:text="${'帖子（'+quCount+'）'}"></a>
                </li>
                <li th:class="${section == 'follow'?'layui-this':''}">
                    <a style="margin-left: 8px;" th:href="@{'/users/follow'(id=${userInfo.id})}" th:text="${'关注（'+userInfo.followCount+'）'}"></a>
                </li>
                <li th:class="${section == 'fans'?'layui-this':''}">
                    <a style="margin-left: 8px;" th:href="@{'/users/fans'(id=${userInfo.id})}" th:text="${'粉丝（'+userInfo.fansCount+'）'}"></a>
                </li>
                <li th:class="${section == 'bookMark' || section == 'collection'?'layui-this':''}" th:if="${publicBookMarkList.size() != 0}">
                    <a style="margin-left: 8px;" th:href="@{'/users/bookMark'(id=${userInfo.id})}" th:text="${'收藏（'+collectionCount+'）'}"></a>
                </li>
            </ul>
            <div th:if="${section == 'question'}">
                <ul class="tree-setType">
                    <li th:each="question:${pagination.data}">
                        <h2>
                            <a class="layui-badge" style="top: -2.5px;" th:text="${question.typeName}"></a>
                            <a th:text="${question.title}"></a>
                        </h2>
                        <p class="tree-text-color" th:text="${#strings.abbreviate(question.description,100)}"></p>
                        <span class="tree-info-color">阅读数
                                <span style="color: #01AAED;" th:text="${question.viewCount}"></span> |
                                评论数
                                <span style="color: #01AAED;" th:text="${question.commentCount}"></span> |
                                <span class="tree-info-color" th:text="${#dates.format(question.gmtCreate,'yyyy-MM-dd HH:mm')}"></span>
                            </span>
                    </li>
                </ul>
                <!-- 分页展示 -->
                <div style="text-align: center;margin-top: 10px" class="laypage-main" th:if="${pagination.data != null}">
                    <div class="layui-box layui-laypage">
                        <li th:if="${pagination.showFirstPage}" class="first">
                            <a th:if="${pagination.showFirstPage}" th:href="@{'/user/'+${userInfo.id}+'/'(page=1)}">&lt;&lt;</a>
                        </li>
                        <li th:if="${pagination.showPrevious}" class="prev">
                            <a th:href="@{'/user/'+${userInfo.id}+'/'(page=${pagination.page-1})}">&lt;</a>
                        </li>
                        <li th:each="page:${pagination.pages}" th:class="${pagination.page==page}?'current_page':''">
                            <a th:href="@{'/user/'+${userInfo.id}+'/'(page=${page})}" th:text="${page}"></a>
                        </li>
                        <li th:if="${pagination.showNext}" class="next">
                            <a th:href="@{'/user/'+${userInfo.id}+'/'(page=${pagination.page+1})}">&gt;</a>
                        </li>
                        <li th:if="${pagination.showEndPage}" class="end">
                            <a th:href="@{'/user/'+${userInfo.id}+'/'(page=${pagination.totalPage})}">&gt;&gt;</a>
                        </li>
                    </div>
                </div>
                <h2 style="text-align: center;padding:20px 0" th:if="${pagination.data == null}">暂无帖子</h2>
            </div>
            <div th:if="${section == 'follow' or section == 'fans'}">
                <ul class="tree-list" th:if="${userList.data != null}">
                    <li style="padding-left: 70px" th:each="follow:${userList.data}">
                        <a th:href="@{'/user/'+${follow.user.id}}" class="tree-avatar">
                            <img th:src="${follow.user.avatarUrl}" style="border-radius: 100%;">
                        </a>
                        <h2>
                            <a th:href="@{'/user/'+${follow.user.id}}" th:text="${follow.user.nickName}"></a>
                        </h2>
                        <div class="tree-list-info">
                            <p style="max-width:74%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" th:text="${follow.user.sign == null?'这个人没有填简介啊~~~':follow.user.sign}"></p>
                        </div>
                        <a onclick="fans(this)" class="layui-btn layui-btn-primary rightbtn2"
                           th:id="${follow.user.id}" th:data-id="${follow.user.id}"
                           th:text="${follow.followStatus == 0?'关注':(follow.followStatus == 1?'已关注':'已互粉')}"
                           th:classappend="${follow.followStatus == 1 or follow.followStatus == 2?'fansStatus':''}"></a>
                        <input type="text" th:id="'status-'+${follow.user.id}" th:value="${follow.followOtherStatus}" hidden="hidden">
                    </li>
                </ul>
                <div style="text-align: center;margin-top: 10px" class="laypage-main" th:if="${userList.data != null}">
                    <div class="layui-box layui-laypage">
                        <li th:if="${userList.showFirstPage}" class="first">
                            <a th:if="${userList.showFirstPage}" th:href="@{'/users/'+${section == 'follow'?'follow':'fans'}+''(id=${userInfo.id},page=1)}">&lt;&lt;</a>
                        </li>
                        <li th:if="${userList.showPrevious}" class="prev">
                            <a th:href="@{'/users/'+${section == 'follow'?'follow':'fans'}+''(id=${userInfo.id},page=${userList.page-1})}">&lt;</a>
                        </li>
                        <li th:each="page:${userList.pages}" th:class="${userList.page==page}?'current_page':''">
                            <a th:href="@{'/users/'+${section == 'follow'?'follow':'fans'}+''(id=${userInfo.id},page=${page})}" th:text="${page}"></a>
                        </li>
                        <li th:if="${userList.showNext}" class="next">
                            <a th:href="@{'/users/'+${section == 'follow'?'follow':'fans'}+''(id=${userInfo.id},page=${userList.page+1})}">&gt;</a>
                        </li>
                        <li th:if="${userList.showEndPage}" class="end">
                            <a th:href="@{'/users/'+${section == 'follow'?'follow':'fans'}+''(id=${userInfo.id},page=${userList.totalPage})}">&gt;&gt;</a>
                        </li>
                    </div>
                </div>
                <h2 style="text-align: center;padding:20px 0" th:if="${userList.data == null}" th:text="${section == 'follow'?'暂无关注':'暂无粉丝'}"></h2>
            </div>
            <div th:if="${section == 'bookMark'}">
                <ul class="mine-view jie-row myBookMark" style="margin: 20px 20px;">
                    <li th:each="bookMark:${publicBookMarkList}">
                        <a th:href="@{'/user/bookMarks/'+${bookMark.id}(id=${userInfo.id})}" th:text="${bookMark.name}" class="jie-title"></a>
                        <span th:text="${bookMark.collectionCount+'条内容'}"></span>
                    </li>
                </ul>
            </div>
            <div th:if="${section == 'collection'}" style="padding: 20px 20px;">
                <a th:href="@{'/users/bookMark'(id=${userInfo.id})}" style="margin: 15px 0;display: inline-block;font-size: 16px;font-weight: 600;">
                    <i class="layui-icon layui-icon-left"></i><span>返回TA创建的收藏夹列表</span>
                </a>
                <hr class="layui-bg-gray">
                <div style="border-bottom: 1px solid #eee;padding-bottom: 10px;" class="tree-bookMark">
                    <h3 style="font-weight: 600;margin-bottom: 10px;display: inline-block;" th:text="${bookMark.name}"></h3>
                    <h4 style="margin-bottom: 10px;color: #999;" th:if="${bookMark.description != ''}" th:text="${bookMark.description != ''?'收藏夹描述：'+bookMark.description:''}"></h4>
                    <div>
                        <span style="color: #999;" th:text="${bookMark.collectionCount+'条内容'}"></span><span class="tree-mid"></span>
                        <span style="color: #999;" th:text="${#dates.format(bookMark.gmtCreate,'yyyy-MM-dd')}"></span>
                    </div>
                </div>
                <ul class="tree-collection" th:if="${questions != null}">
                    <li th:each="question:${questions}">
                        <h3>
                            <a th:href="@{'/question/'+${question.id}}" th:text="${question.title}" class="text-hidden3"></a>
                        </h3>
                        <span class="tree-info-color">阅读数
                        <span style="color: #01AAED;" th:text="${question.viewCount}"></span> | 评论数
                        <span style="color: #01AAED;" th:text="${question.commentCount}"></span> |
                        <span class="tree-info-color" th:text="${#dates.format(question.gmtCreate,'yyyy-MM-dd HH:mm')}"></span>
                    </span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div th:replace="footer :: foot"></div>
</body>
</html>